<script setup lang="ts">
import {useRouter, useRoute} from 'vue-router';
import {ref} from 'vue';
import {jStorage} from 'jzutil';
import {ElMessage} from 'element-plus';
const router = useRouter();
const route = useRoute();
const tableData = ref([]);
const columns: any[] = [
    {
        label: '名称',
        key: 'name'
    },
    {
        label: '创建时间',
        key: 'createTime'
    },
    {
        label: '备注',
        key: 'remark'
    }
];
const showModal = ref(false);
const handlePreview = (row: any) => {};
const handleDelete = (row: any) => {};
const handleAdd = () => {
    showModal.value = true;
};
const formData = ref({
    name: '',
    remark: '',
    source: []
});
const source = ref<any[]>([]);
const submit = () => {
    const swiper = jStorage.getLocal('swpier') || [];
    swiper.push(formData.value);
    jStorage.setLocal('swiper', swiper);
    ElMessage({
        message: '新增成功',
        duration: 1000,
        type: 'success'
    });
    tableData.value = swiper;
    showModal.value = false;
};
(() => {
    const works = jStorage.getLocal('works') || [];
    source.value = works;
    const swiper = jStorage.getLocal('swiper') || [];
    tableData.value = swiper;
})();
</script>
<template>
    <el-container>
        <el-header class="page-header">
            <el-button type="primary" icon="el-icon-circle-plus" size="medium" @click="handleAdd">新增</el-button>
        </el-header>
        <el-main class="page-body">
            <div class="page-body-table">
                <el-table :data="tableData" stripe border style="width: 100%" height="100%">
                    <el-table-column type="index" width="50"> </el-table-column>
                    <el-table-column
                        :prop="item.key"
                        :label="item.label"
                        v-for="(item, index) in columns"
                        :key="index.toString()"
                    >
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="mini" type="text" @click="handlePreview(scope.row)">查看</el-button>
                            <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-body-pagination">
                <el-pagination background layout="total, prev, pager, next" :total="1000"></el-pagination>
            </div>
        </el-main>
        <el-dialog
            title="轮播图管理"
            v-model="showModal"
            width="40%"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
        >
            <el-form label-position="left" label-width="50px" :model="formData">
                <el-form-item label="名称:">
                    <el-input v-model="formData.name" placeholder="请输入名称" maxlength="10"></el-input>
                </el-form-item>
                <el-form-item label="资源:">
                    <el-select v-model="formData.source" placeholder="请选择资源" multiple>
                        <el-option
                            v-for="item in source"
                            :key="item.name"
                            :label="item.name"
                            :value="JSON.stringify(item)"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注:">
                    <el-input type="textarea" :rows="4" v-model="formData.remark"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showModal = false">取 消</el-button>
                    <el-button type="primary" @click="submit">保 存</el-button>
                </span>
            </template>
        </el-dialog>
    </el-container>
</template>
<style scoped lang="less">
.page-header {
    display: flex;
    align-items: center;
}
.page-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: calc(100% - 60px);
}
.page-body-table {
    width: 100%;
    height: calc(100% - 40px);
}
</style>
